{% extends '::layout.html.twig' %}

{% block javascripts %}
<script type="text/javascript">
    var barchart;
    var barchartData = new Array();
{% for affectation in affectationsdb%}
    barchartData.push({
        userstory: "{{ affectation.refUserstorie.action}}",
        avancement: {{ affectation.avancement}},
        color: "#999999"
    });
{% endfor %}

    var radiochart;
    var radiochartData = new Array();
    var numMax = 0;
    {% for key, number in info %}
        if(numMax < {{ number }}){
            numMax = {{ number }};
        }
        radiochartData.push({
        table: "{{ key }}",
        value: {{ number }}
    });
    {% endfor %}

    var chart;
    var chartData = new Array();

    {% for date, number in tabcra %}
        chartData.push({
        date: new Date({{ date }}),
        price: {{ number }}
    });
    {% endfor %}
        
    AmCharts.ready(function () {
        barchart = new AmCharts.AmSerialChart();
        barchart.dataProvider = barchartData;
        barchart.categoryField = "userstory";
        barchart.depth3D = 20;
        barchart.angle = 30;

        // AXES
        // category
        var categoryAxis = barchart.categoryAxis;
        categoryAxis.labelRotation = 90;
        categoryAxis.dashLength = 5;
        categoryAxis.gridPosition = "start";

        // value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.title = "Avancement";
        valueAxis.dashLength = 5;
        barchart.addValueAxis(valueAxis);

        // GRAPH            
        var graph = new AmCharts.AmGraph();
        graph.valueField = "avancement";
        graph.colorField = "color";
        graph.balloonText = "[[category]]: [[value]]";
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 1;
        barchart.addGraph(graph);

        // RADAR CHART
        radarchart = new AmCharts.AmRadarChart();
        radarchart.dataProvider = radiochartData;
        radarchart.categoryField = "table";
        radarchart.startDuration = 1;

        // TITLE
        radarchart.addTitle("Scrumwisdom", 15);

        // VALUE AXIS
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.gridType = "circles";
        valueAxis.fillAlpha = 0.05;
        valueAxis.fillColor = "#000000"
        valueAxis.axisAlpha = 0.2;
        valueAxis.gridAlpha = 0;
        valueAxis.fontWeight = "bold"
        valueAxis.minimum = 0;
        radarchart.addValueAxis(valueAxis);

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.lineColor = "#004747"
        graph.fillAlphas = 0.4;
        graph.bullet = "round"
        graph.valueField = "value"
        graph.balloonText = "[[category]]: [[value]]"
        radarchart.addGraph(graph);

        // GUIDES
        // blue fill
        var guide = new AmCharts.Guide();
        guide.angle = 225;
        guide.tickLength = 0;
        guide.toAngle = 315;
        guide.value = 0;
        guide.toValue = numMax + 1;
        guide.fillColor = "#999999";
        guide.fillAlpha = 0.6
        valueAxis.addGuide(guide);

                // red fill
        var guide = new AmCharts.Guide();
        guide.angle = 45;
        guide.tickLength = 0;
        guide.toAngle = 135;
        guide.value = 0;
        guide.toValue = numMax + 1;
        guide.fillColor = "#333333";
        guide.fillAlpha = 0.6;
        valueAxis.addGuide(guide); 
        
        // SERIAL CHART    
        chart = new AmCharts.AmSerialChart();
        chart.pathToImages = "{{ asset('bundles/projectscrum/images/')}}";
        chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
        };
        chart.dataProvider = chartData;
        chart.categoryField = "date";

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
        categoryAxis.dashLength = 1;
        categoryAxis.gridAlpha = 0.15;
        categoryAxis.axisColor = "#DADADA";

        // value                
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.axisColor = "#DADADA";
        valueAxis.dashLength = 1;
        valueAxis.logarithmic = true;
        chart.addValueAxis(valueAxis);


        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.type = "smoothedLine";
        graph.bullet = "round";
        graph.bulletColor = "#FFFFFF";
        graph.bulletBorderColor = "#338585";
        graph.bulletBorderThickness = 2;
        graph.bulletSize = 7;
        graph.title = "Price";
        graph.valueField = "price";
        graph.lineThickness = 2;
        graph.lineColor = "#004747";
        chart.addGraph(graph);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        chart.addChartCursor(chartCursor);

        // SCROLLBAR
        var chartScrollbar = new AmCharts.ChartScrollbar();
        chart.addChartScrollbar(chartScrollbar);


        // ecriture des chartes
        barchart.write("barchartdiv");
        radarchart.write("radiochartdiv");
        chart.write("chartdiv");
    });
    </script>
{% endblock %}

{% block title %}Statistiques{% endblock%}

{% block titreNav %}Statistiques{% endblock %}

{% block titreContent %}Statistiques{% endblock %}

{% block titreBreadcrumbs %}
    <li class="current"><a href="#">Statistiques</a></li>
{% endblock %}

{% block contentnav %}
    <!-- Sidebar datepicker -->
    <div class="sideWidget">
        <div class="inlinedate"></div>
    </div>
{% endblock %}

{% block content %}
    
    <div class="fluid">
        <div class="widget grid6">
            <div class="whead">
                <h6>Informations</h6>

                <div class="clear"></div>
            </div>
            <div id="radiochartdiv" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="widget grid6">
            <div class="whead">
                <h6>Avancement des projets en cours</h6>

                <div class="clear"></div>
            </div>
            <div id="chartdiv" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
    <div class="widget">
        <div class="whead">
            <h6>Avancement des projets en cours</h6>

            <div class="clear"></div>
        </div>
        <div id="barchartdiv" style="width: 100%; height: 400px;"></div>
    </div>
{% endblock %}


